import React, { Component } from "react";
import { NavBar, Toast, Carousel, WhiteSpace } from "antd-mobile";

import { get_Hourse_Detial } from "../../utils/biz_http.js";

import { Link } from "react-router-dom";

import "./detials.scss";
import "../../assets/fonts/iconfont.css";

// 猜你喜欢后端暂时没有提供接口，我们用静态数据先把结构处理好
const guessData = [
  {
    houseImg: "/newImg/7bjk7dcn4.jpg",
    title: "中海锦城 3室2厅 3400元",
    tags: ["近地铁"],
    price: 3400,
    desc: "三室/113/南/中海锦城",
    houseCode: "5cc44e1f1439630e5b3d353c",
  },
  {
    houseImg: "/newImg/7bjfdalho.jpg",
    title: "整租 · 出租 银河城春晓苑一期 中间楼层，阳光好。",
    tags: ["双卫生间"],
    price: 1300,
    desc: "三室/63/南|北/银河城春晓苑",
    houseCode: "5cc477061439630e5b467b0b",
  },
  {
    houseImg: "/newImg/7bjk6g1cn.jpg",
    title: "吉祥龙精装三房 有钥匙 看房方便",
    tags: ["近地铁", "随时看房"],
    price: 18000,
    desc: "三室/100/东南/汉森吉祥龙",
    houseCode: "5cc4a1db1439630e5b50220f",
  },
];

// 房屋配套数据源
const HOUSE_PACKAGE = [
  {
    id: 1,
    name: "衣柜",
    icon: "icon-wardrobe",
  },
  {
    id: 2,
    name: "洗衣机",
    icon: "icon-wash",
  },
  {
    id: 3,
    name: "空调",
    icon: "icon-air",
  },
  {
    id: 4,
    name: "天然气",
    icon: "icon-gas",
  },
  {
    id: 5,
    name: "冰箱",
    icon: "icon-ref",
  },
  {
    id: 6,
    name: "暖气",
    icon: "icon-Heat",
  },
  {
    id: 7,
    name: "电视",
    icon: "icon-vid",
  },
  {
    id: 8,
    name: "热水器",
    icon: "icon-heater",
  },
  {
    id: 9,
    name: "宽带",
    icon: "icon-broadband",
  },
  {
    id: 10,
    name: "沙发",
    icon: "icon-sofa",
  },
];

const BMap = window.BMap;

class HourseDetial extends Component {
  state = {
    isMark: false, // 是否收藏
    guessData,
    info: {
      houseImg: [
        "/newImg/7bjda81jh.jpg",
        "/newImg/7biic6li0.jpg",
        "/newImg/7bj41bnpp.jpg",
        "/newImg/7bi5fok43.jpg",
        "/newImg/7bj4hf9fe.jpg",
        "/newImg/7bkp38kn9.jpg",
        "/newImg/7bl1ili6o.jpg",
        "/newImg/7bkgh93eo.jpg",
      ],
      title: "整租 · 御景新世界 诚心出租 视野好 采光好 户型好",
      tags: ["精装", "集中供暖", "双卫生间"],
      price: 16500,
      houseCode: "5cc4494549926d0e2b94c816",
      description:
        "【房源亮点】 此房所在园区环境很安静适合居住，三室两厅比较适合一家三口或者老人居住，距离公园特近，园区安静 ，购物便利 【交通出行】 可乘公交路线 222 800 173 预备役号等 距离地铁2号线市图站1.5公里（来源百度地图） 【周边配套】 南临浑河南岸 沈水湾公园 距离200米{来源百度地图} 市图书馆1300米 {来源百度地图}三好街1500米{来源百度地图}东北大学1400米{来源百度地图} 【小区介绍】 新世界开发商，封闭园区24小时物业，物业管理严格，每楼都有大堂管家，照顾您的日常生活。",
      roomType: "三室",
      oriented: ["南", "北"],
      floor: "中楼层",
      community: "御景新世界",
      coord: {
        latitude: "41.757876",
        longitude: "123.428481",
      },
      supporting: [
        "电视",
        "冰箱",
        "洗衣机",
        "空调",
        "热水器",
        "沙发",
        "暖气",
        "宽带",
        "衣柜",
        "天然气",
      ],
      size: 65,
    },
  };

  async componentDidMount() {
    let { hourseid } = this.props.match.params;
    await this.GetHourseData(hourseid);
    this.initMap();
  }

  async componentWillReceiveProps(nextProps) {
    let { hourseid } = nextProps.match.params;
    await this.GetHourseData(hourseid);
    this.initMap();
  }

  async GetHourseData(hourseid) {
    let res = await get_Hourse_Detial(hourseid);
    this.setState({ info: res.data.body });
  }

  // 1.0 导航栏
  renderNav = () => {
    return (
      <NavBar
        mode="light"
        className="narbar"
        //   icon={<Icon type="left" />}
        icon={<i className="iconfont icon-back"></i>}
        rightContent={<i className="iconfont icon-share" />}
        onLeftClick={() => this.props.history.go(-1)}
      >
        新业路公安宿舍
      </NavBar>
    );
  };

  // 2.0 跑马灯
  renderCarousel = () => {
    const {
      info: { houseImg },
    } = this.state;
    return (
      <Carousel infinite className="slider">
        {houseImg.map((item) => (
          <img key={item.houseCode} src={"http://157.122.54.189:9060" + item} />
        ))}
      </Carousel>
    );
  };

  // 3.0 房屋名称基本信息
  renderHouseInfo = () => {
    const {
      info: { tags, title, price, roomType, size, oriented, floor },
    } = this.state;
    const info_bottom_data = [
      { title: "装修", value: "精装" },
      { title: "朝向", value: oriented && oriented.join(",") },
      { title: "楼层", value: floor },
      { title: "类型", value: "普通住宅" },
    ];
    return (
      <div className="info">
        <div className="info_header">
          <h3 className="info_header_name">{title}</h3>
          <div className="info_header_tags">
            {tags && tags.map((item) => <span key={item}>{item}</span>)}
          </div>
        </div>
        <div className="info_main">
          <div className="info_main_item">
            <p>{price}</p>
            <span>租金</span>
          </div>
          <div className="info_main_item">
            <p>{roomType}</p>
            <span>房型</span>
          </div>
          <div className="info_main_item">
            <p>{size}平米</p>
            <span>面积</span>
          </div>
        </div>
        <div className="info_bottom">
          {info_bottom_data.map((item) => (
            <div key={item.title} className="info_bottom_item">
              <span>{item.title}：</span>
              <span>{item.value}</span>
            </div>
          ))}
        </div>
      </div>
    );
  };

  // 初始化地图
  initMap = () => {
    const {
      info: {
        community,
        coord: { latitude, longitude },
      },
    } = this.state;
    // console.log({ latitude, longitude });
    /* 初始化地图 */
    const map = new BMap.Map("map"); // 创建地图实例
    const point = new BMap.Point(longitude, latitude); // 创建点坐标
    map.centerAndZoom(point, 14); // 初始化地图，设置中心点坐标和地图级别
    map.addControl(new BMap.NavigationControl());
    /* 添加地图覆盖物 */
    const opts = {
      position: point, // 指定文本标注所在的地理位置
      offset: new BMap.Size(-35, -13), // 设置文本偏移量
    };
    // 创建文本标注对象
    const label = new BMap.Label(
      `<div class="map_red_rect">
      <span>${community}</span>
      <span class="map_red_arrow"></span>
    </div>`,
      opts
    );
    // 自定义文本标注样式
    label.setStyle({
      backgroundColor: "transparent",
      border: "none",
    });
    map.addOverlay(label);
  };
  // 4.0渲染地图
  renderMap = () => {
    const {
      info: {
        community,
        coord: { latitude, longitude },
      },
    } = this.state;
    return (
      <div className="d_map">
        <div className="title">小区：{community}</div>
        <div id="map" className="map_main"></div>
      </div>
    );
  };
  // 5.0 渲染房源配置
  renderSupport = () => {
    const {
      info: { supporting },
    } = this.state;

    //   查找出符合条件的房屋配套
    let supports = HOUSE_PACKAGE.filter((item) =>
      supporting.includes(item.name)
    );
    return (
      <>
        <div className="title">房源配套</div>
        <div className="support">
          {supports.map((item) => (
            <div key={item.id} className="support_item">
              <span className={`iconfont ${item.icon}`}></span>
              <span>{item.name}</span>
            </div>
          ))}
        </div>
      </>
    );
  };
  // 6.0 渲染描述
  renderDescription = () => {
    const { description } = this.state;
    return (
      <>
        <div className="title">房源概况</div>
        <div className="description">
          <div className="description_title">
            {/* 房东 */}
            <img
              className="owner_avatar"
              src="https://api-haoke-web.itheima.net/img/avatar.png"
              alt=""
            />
            <div className="owner_info">
              <span className="owner_info_name">王女士</span>
              <span className="owner_info_tag">
                <i className="iconfont icon-auth"></i>已认证房主
              </span>
            </div>
            <span className="owner_send_msg">发消息</span>
          </div>
          <div className="description_body">
            {description ? description : "暂无房屋描述"}
          </div>
        </div>
      </>
    );
  };
  // 7.0猜你喜欢
  renderGuess = () => {
    const { guessData } = this.state;
    return (
      <>
        <div className="title">猜你喜欢</div>
        <div className="guess_list">
          {guessData.map((item) => (
            <Link
              key={item.houseCode}
              to={`/details/${item.houseCode}`}
              className="house_item"
            >
              <img
                className="house_item_img"
                src={"http://157.122.54.189:9060" + item.houseImg}
                alt="图片替换文本"
              />
              <div className="house_item_info">
                <h4 className="house_item_name">{item.title}</h4>
                <p className="house_item_desc">{item.desc}</p>
                <p className="house_item_tags">
                  {item.tags &&
                    item.tags
                      .slice(0, 3)
                      .map((tag) => <span key={tag}>{tag}</span>)}
                </p>
                <p className="house_item_price">{item.price}</p>
              </div>
            </Link>
          ))}
        </div>
      </>
    );
  };

  // 8.0渲染底部栏
  renderBottom = () => {
    const { isMark } = this.state;
    return (
      <div className="bottom">
        <div className="bottom_item">
          {isMark ? (
            <>
              <img
                className="bottom_icon_fav"
                src="https://api-haoke-web.itheima.net/img/star.png"
              />
              <span>已收藏</span>
            </>
          ) : (
            <>
              <img
                className="bottom_icon_fav"
                src="https://api-haoke-web.itheima.net/img/unstar.png"
              />
              <span>收藏</span>
            </>
          )}
        </div>
        <div
          onClick={() => Toast.info("功能升级中...", 2)}
          className="bottom_item"
        >
          在线咨询
        </div>
        <a href="tel://10086" className="bottom_item">
          电话预约
        </a>
      </div>
    );
  };
  render() {
    //   路由传入的房子id参数
    let { hourseid } = this.props.match.params;
    let {
      info: { supporting },
    } = this.state;
    return (
      <div className="detail">
        {/* 1.0 NavBar */}
        {this.renderNav()}
        {/* 2.0 轮播图(走马灯) */}
        <div className="slider_out">{this.renderCarousel()}</div>
        {/* 3.0 房屋名称基本信息 */}
        {this.renderHouseInfo()}
        <WhiteSpace size="md" />
        {/* 4.0 房屋地图位置 */}
        {this.renderMap()}
        <WhiteSpace size="md" />
        {/* 5.0 房源配套 */}
        {!!supporting.length && this.renderSupport()}
        {/* 6.0 房源概况 */}
        <WhiteSpace size="md" />
        {this.renderDescription()}
        {/* 7.0 猜你喜欢 */}
        <WhiteSpace size="md" />
        {this.renderGuess()}
        {/* 8.0 底部固定栏 */}
        {this.renderBottom()}
      </div>
    );
  }
}

export default HourseDetial;
